// 引入插件
var HtmlWebpackPlugin = require('html-webpack-plugin');
var MiniCssExtractPlugin = require('mini-css-extract-plugin')
// 处理路劲模块
var path = require('path');
var webpack = require("webpack");

module.exports = {
   // development | production | none
   //    开发            生产
   mode: "production",
   // 入口
   entry: {
      "index": "./src/index.js",
      "note_member": "./src/note_member.js",
      "login": "./src/login.js",
      "cloud_collaboration": "./src/cloud_collaboration.js",
      "shopping": "./src/shopping.js",
      "download": "./src/download.js"
   },
   output: {
      path: path.resolve(__dirname, "dist"),
      // 设置打包出来的文件的名称
      filename: "js/bundle-[name].js"
   },
   module: {
      rules: [{
         // css-loader
         // 匹配文件后缀
         test: /\.css$/,
         // use: ['style-loader', 'css-loader']
         // 针对css文件中背景图
         use: [
            {
               loader: MiniCssExtractPlugin.loader,
               options: {
                  publicPath: '../'
               }
            },
            "css-loader"
         ]
      },
      //打包图片
      {
         test: /\.(png|jpg|gif|jpeg|webp)$/i,
         use: [{
            loader: 'url-loader',
            options: {
               esModule: false, // 关闭ES中的严格模式
               limit: 8192, // 限制大小
               name: './photo/[name]-[hash:8].[ext]', // 设置文件目录和名称
            }
         },],
         // webpack 5.+ 需要防止重复打包图片
         type: 'javascript/auto'
      }, {
         test: /\.(htm|html)$/i,
         loader: 'html-withimg-loader'
      }]
   },
   performance: {
      hints: 'warning', // 枚举 false关闭
      maxEntrypointSize: 100000000, // 最大入口文件大小
      maxAssetSize: 100000000, // 最大资源文件大小
      assetFilter: function (assetFilename) { //只给出js文件的性能提示
         return assetFilename.endsWith('.js');
      }
   },
   // 插件
   plugins: [
      new HtmlWebpackPlugin({
         title: "首页",
         template: './src/views/index.html',
         filename: "index.html",
         chunks: ['index'],
         inject: 'body',//文件  minif
      }),
      new HtmlWebpackPlugin({
         title: "笔记会员",
         template: './src/views/note_member.html',
         filename: "note_member.html",
         chunks: ['note_member'],
         inject: 'body',//文件  minif
      }),
      new HtmlWebpackPlugin({
         title: "登录",
         template: './src/views/login.html',
         filename: "login.html",
         chunks: ['login'],
         inject: 'body',//文件  minif
      }),
      new HtmlWebpackPlugin({
         title: "云协作",
         template: './src/views/cloud_collaboration.html',
         filename: "cloud_collaboration.html",
         chunks: ['cloud_collaboration'],
         inject: 'body',//文件  minif
      }),
      new HtmlWebpackPlugin({
         title: "智能硬件",
         template: './src/views/shopping.html',
         filename: "shopping.html",
         chunks: ['shopping'],
         inject: 'body',//文件  minif
      }),
      new HtmlWebpackPlugin({
         title: "下载",
         template: './src/views/download.html',
         filename: "download.html",
         chunks: ['download'],
         inject: 'body',//文件  minif
      }),
      // 分离CSS
      new MiniCssExtractPlugin({
         filename: "./css/[name].css"
      }),
      new webpack.ProvidePlugin({
         $: "jquery",
         jQuery: "jquery"
      })
   ],
   // 配置服务
   devServer: {
      static: {
         directory: path.join(__dirname, 'dist'),
      },
      compress: false,//不需要压缩
      port: 8881,
      open: true,
   }
}